<template>
  <view class="kaobuguo_container compensate_bg">
    <view class="bg"></view>
    <navbar mode="transparent">
      <template v-slot:content>
        <view class="flex-row justify-center" style="width: 100vw">
          <image src="@/static/white_back.png" mode="widthFix" class="back" @click="toBack"></image>
          <text class="self-center title">科一考不过，补偿60元</text>
        </view>
      </template>
    </navbar>
    <view class="panel" style="margin-top: 300rpx">
      <view class="main_title">补偿达标条件</view>
      <view class="rule_item">
        <view class="index">1</view>
        <view class="body">
          <view class="label">开通会员</view>
          <view class="sub_label">仅限开通{{ mainProduct.title }}</view>
        </view>
        <view class="btn" v-if="isAllVIP">
          已激活
        </view>
        <view class="btn disable" v-else @click="toVIP">
          前往开通
        </view>
      </view>
      <view class="rule_item">
        <view class="index">2</view>
        <view class="body">
          <view class="label">填写信息、激活权益</view>
          <view class="sub_label">至少在正式考试前一天激活</view>
        </view>
        <view class="btn" v-if="mine.cardId">
          已激活
        </view>
        <view class="btn disable" @click="toEdit" v-else>
          立即激活
        </view>
      </view>
      <view class="rule_item">
        <view class="index">3</view>
        <view class="body">
          <view class="label">正式考试前科目一模拟考试连续合格2次</view>
          <view class="sub_label">合格进度：{{ jindu }}/2</view>
        </view>
        <view class="btn" v-if="jindu===2">
          已达标
        </view>
        <view class="btn disable" v-else @click="toKaoshi">
          去查看
        </view>
      </view>
      <view @click="toSubmitCompensate" :class="['custom-btn compensate', canSubmitCompensate? 'primary':'']">
        {{ canSubmitCompensate ? '科一没考过，申请补偿60元' : '未满足补偿条件' }}
      </view>
    </view>
    <view class="panel">
      <view class="main_title">常见问题</view>
      <view class="question">
        <view class="text">（1）如何激活补偿权益？</view>
        <view class="text2">激活补偿权益点击立即激活填写基本信息即可</view>
      </view>
      <view class="question">
        <view class="text">（2）补偿权益什么时候生效？</view>
        <view class="text2">补偿权益在激活后次日0点生效至VIP会员截止之前</view>
      </view>
      <view class="question">
        <view class="text">（3）补偿金额是多少？</view>
        <view class="text2">科目一考不过补偿60元</view>
      </view>
      <view class="question">
        <view class="text">（4）补偿条件是什么？</view>
        <view class="text2">用户申请补偿服务需要在补偿服务生效之后</view>
        <view class="text2">
          用户参加公安局车管所举办的驾驶员科目一(机动车驾驶员考试)之前，需要连续2次模拟考试成绩在90分以上
        </view>
        <view class="text2">
          用户参加公安局车管所举办的驾驶员科目一(机动车驾驶员考试)的日期需在补偿权益有效期内，且真实考试成绩为不合格
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import Navbar from "@/components/navbar.vue";
import {mapGetters, mapActions} from 'vuex'
import day from "@/vendor/day";
import {commonApi} from "@/api";

export default {
  components: {Navbar},
  data() {
    return {
      jindu: 0
    }
  },
  computed: {
    ...mapGetters(['mine', 'isAllVIP', 'settings', 'mainProduct']),
    ...mapGetters('question', ['kemu1']),
    canSubmitCompensate() {
      if (this.isAllVIP && this.mine.cardId && this.jindu >= 2) {
        return true
      }

      return false
    },
  },
  async onLoad() {
    const res = await commonApi.kemu1KaobuguoExam()
    this.jindu = res.data.data
  },
  methods: {
    ...mapActions(['refreshUser']),
    toBack() {
      uni.navigateBack()
    },
    toEdit() {
      if (this.isAllVIP) {
        uni.navigateTo({
          url: '/pages/kaobuguo/edit_kaobuguo'
        })
      } else {
        uni.showToast({
          title: '请先开通' + this.mainProduct.title,
          icon: 'none',
          duration: 2000
        });
      }
    },
    toVIP() {
      uni.navigateTo({
        url: '/pages/vip/vip',
      });
    },
    toKaoshi() {
      uni.navigateTo({
        url: '/pages/exam_result/exam_result?kemu=1'
      })
    },
    toSubmitCompensate() {
      if (!this.isAllVIP) {
        uni.showToast({
          title: '请先开通' + this.mainProduct.title,
          icon: 'none',
          duration: 2000
        });
        return
      }
      // const a = day(this.mine.cardId.createdAt).hour(0).minute(0).second(0).add(1, 'day')
      // console.log(a.format('YYYY-MM-DD HH:mm:ss'), a.valueOf(), this.mine.cardId.createdAt)
      // if (Date.now() < a.valueOf()) {
      //   uni.showToast({
      //     title: '权益从明天' + a.format('M月D日') + '0时开始生效！',
      //     icon: 'none',
      //     duration: 2000
      //   });
      //   return
      // }

      if (this.jindu < 2) {
        uni.showToast({
          title: '三天内模拟考试需要连续合格2次！',
          icon: 'none',
          duration: 2000
        });
        return
      }

      uni.showModal({
        title: '微信联系客服：' + this.settings.kefuPhone,
        content: '早上09:00-晚上21:00',
        confirmText: '复制微信',
        showCancel: false,
        success: () => {
          uni.setClipboardData({
            showToast: true,
            data: this.settings.kefuPhone
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background: #fff;
}

.top-bar {
  .back {
    position: absolute;
    left: 30upx;
    width: 36upx;
    height: 36upx;
    align-self: center;
  }

  .title {
    font-weight: bold;
    font-size: 32upx;
    color: #FFFFFF;
  }
}

.kaobuguo_container {
  position: relative;
  display: flex;
  flex-direction: column;

  &.compensate_bg {
    background-color: #f5f6f8;
  }

  .bg {
    position: absolute;
    top: 0;
    width: 100%;
    background-image: url("https://down.qwdata.vip/app_icon/1705059187935");
    height: 1000rpx;
    background-size: cover;
    background-position: top;
  }

  .panel {
    background-color: #fff;
    margin: 0 30upx 30rpx 30upx;
    z-index: 1;
    padding: 30upx 30upx 50upx 30upx;
    border-radius: 20upx;
    display: flex;
    flex-direction: column;

    .main_title {
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 30rpx;
      margin-top: 20rpx;
    }

    .question {
      margin-top: 40rpx;

      &:nth-child(2) {
        margin-top: 0;
      }

      .text {
        font-size: 16px;
        font-weight: bold;
      }

      .text2 {
        color: #888;
        margin-left: 10rpx;
        margin-top: 20rpx;
        line-height: 42rpx;
      }
    }

    .rule_item {
      display: flex;
      background-color: #ebf5ff;
      padding: 30rpx;
      padding-left: 0;
      border-radius: 20rpx;
      margin-bottom: 24rpx;

      .index {
        width: 90rpx;
        font-size: 30px;
        font-weight: bold;
        color: #3d8cef;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .body {
        flex: 1;

        .label {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 8rpx;
        }

        .sub_label {
          color: #888;
          font-size: 14px;
        }
      }

      .btn {
        align-self: center;
        background-color: #f5d4b4;
        width: 140rpx;
        height: 60rpx;
        display: flex;
        margin-left: 10rpx;
        align-items: center;
        justify-content: center;
        border-radius: 100rpx;

        &.disable {
          background-color: #3274f6;
          color: #fff;
        }
      }
    }
  }

  .protocol-container {
    margin-top: 20rpx;
    margin-bottom: 30rpx;
    text-align: center;

    .title1 {
      font-size: 14px;
      color: #858585;
    }

    .title2 {
      font-size: 14px;
      color: #3274f6;
    }
  }

  .row {
    display: flex;
    height: 108rpx;
    padding: 0 30rpx;

    .label {
      align-self: center;
      font-size: 15px;
      font-weight: bold;
    }

    .input {
      width: 100%;
      text-align: right;
      line-height: 108rpx;
      height: 108rpx;
      font-size: 15px;
    }
  }

  .divider {
    background-color: #f0f0f0;
    height: 1px;
    margin: 0 30rpx;
  }

  .red {
    color: red;
    margin: 0 30rpx;
    line-height: 80rpx;
  }

  .tips_title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30rpx;
    margin-top: 20rpx;
  }

  .tips {
    color: #777;
    margin: 0 30rpx;
    line-height: 40rpx;
    margin-bottom: 20rpx;
  }

  .input-container {
    margin-top: 50rpx;
    margin-left: 40upx;
    margin-right: 40upx;
    background-color: #e0e0e0;
    color: #666;

    &.primary {
      background-color: #3073f6;
      color: #fff;
    }
  }

  .compensate {
    margin-top: 20rpx;
    background-color: #e0e0e0;
    color: #666;

    &.primary {
      background-color: #3073f6;
      color: #fff;
    }
  }
}
</style>
